{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SHTL</title>
    <link
      href="{% static 'bootstrap/css/bootstrap.min.css' %}"
      rel="stylesheet"
    />
    <style>
      body {
        padding-top: 56px; /* 适应导航栏的高度 */
      }
      .body {
        padding:5px 10px 10px 10px;
        {% comment %} background-color: #f8f9fa; {% endcomment %}
      }
      .form-group label {
        text-align: left;
        /* display: flex; */
        /* align-items: center; */
      }
      .form-group div {
        display: flex;
        align-items: center;
      }
      select {
        width: 150px !important;
      }
      input {
        width: 400px !important;
      }

      @keyframes sideIn {
        from {
          transform: translateY(-200%);
        }
        to {
          transform: translateY(0);
        }
      }

      #message-container {
        aquamarine: sideIn 0.8s ease-out;
        position: fixed;
        top: 10%; /* 垂直居中 */
        left: 50%; /* 水平居中 */
        transform: translate(-50%, -50%); /* 通过负的50%的偏移量实现居中 */
        z-index: 9999;
      }
      {% comment %} .alert {
        display: inline-block; /* 根据内容宽度自适应 */
        max-width: 90%; /* 限制最大宽度（可选） */
        padding: 10px; /* 内边距（可选） */
        box-sizing: border-box; /* 包含内边距和边框 */
        background-color: #f8d7da; /* 默认背景色（可选） */
        border: 1px solid #f5c6cb; /* 默认边框（可选） */
        border-radius: 0.25rem; /* 默认圆角（可选） */
      } {% endcomment %}
    </style>
    {% block style %} {% endblock %}
  </head>
  <body>
    <script src="{% static 'jquery/jquery-3.5.1.slim.min.js' %}"></script>
    <script src="{% static 'popper/popper.min.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>

    <!-- 通用对话框 -->
    <div
      class="modal fade"
      id="commonDialog"
      tabindex="-1"
      role="dialog"
      aria-labelledby="dialogTitle"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="dialogTitle">Dialog Title</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body" id="dialogBody">
            Dialog content goes here...
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              取消
            </button>
            <button type="button" class="btn btn-primary" id="dialogConfirmBtn">
              确认
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <!-- 这里是用来显示消息的地方 -->
      <div id="message-container"></div>
    </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">SHTL</a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item" id="nav-home">
              <a class="nav-link" href="/"
                >首页 <span class="sr-only">(current)</span></a
              >
            </li>
            <li class="nav-item active" id="nav-add">
              <a class="nav-link" href="/add">新增</a>
            </li>
            <li class="nav-item" id="nav-server-info">
              <a class="nav-link" href="/server_info">服务器配置</a>
            </li>
            <li class="nav-item dropdown" style="display: none">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item" style="display: none">
              <a class="nav-link disabled">Disabled</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0" action="/search" method="post">
            {% csrf_token %}
            <input
              class="form-control mr-sm-2"
              type="search"
              name="search"
              placeholder="搜索"
              onfocus="moveCursorToEnd(this)"
              autofocus
              aria-label="Search"
              value="{{search_value}}"
            />
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
              搜索
            </button>
            <ul class="navbar-nav mr-auto" style="margin-left: 20px">
              <li class="nav-item dropdown dropleft">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  role="button"
                  data-toggle="dropdown"
                  aria-expanded="false"
                >
                  {% if request.user.first_name %} {{request.user.first_name}}
                  {% else %} {{request.user}} {% endif %}
                </a>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="#" id="personInfo"
                    >个人信息</a
                  >
                  <a class="dropdown-item" href="#" id="changePassword"
                    >修改密码</a
                  >
                  <a class="dropdown-item" href="/logout">退出登录</a>
                </div>
              </li>
            </ul>
          </form>
        </div>
      </div>
    </nav>
    <div class="container-fluid">
      <div class="body">{% block content %} {% endblock %}</div>
    </div>
    <script>
      function moveCursorToEnd(el) {
        if (typeof el.selectionStart == "number") {
          el.selectionStart = el.selectionEnd = el.value.length;
        } else if (typeof el.createTextRange != "undefined") {
          el.focus();
          var range = el.createTextRange();
          range.collapse(false);
          range.select();
        }
      }
      function openDialog(title, body, onConfirm) {
        $('#dialogTitle').text(title);
        $('#dialogBody').html(body);
        $('#commonDialog').modal('show');

        $('#dialogConfirmBtn').off('click').on('click', function() {
            if (typeof onConfirm === 'function') {
                onConfirm();
            }
            $('#commonDialog').modal('hide');
        });
      }

      function createDialog(title, body, onConfirm) {
          // 生成一个随机的ID
          const dialogId = 'dialog_' + Math.random().toString(36).substr(2, 9);

          // 创建对话框的HTML
          const dialogHTML = `
          <div class="modal fade" id="${dialogId}" tabindex="-1" role="dialog" aria-labelledby="${dialogId}_title" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="${dialogId}_title">${title}</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body" id="${dialogId}_body">
                  ${body}
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                  <button type="button" class="btn btn-primary" id="${dialogId}_confirmBtn">确认</button>
                </div>
              </div>
            </div>
          </div>`;

          // 将对话框HTML添加到页面中
          $('body').append(dialogHTML);

          // 显示对话框
          $(`#${dialogId}`).modal('show');

          // 确认按钮点击事件绑定
          $(`#${dialogId}_confirmBtn`).on('click', function() {
              if (typeof onConfirm === 'function') {
                  onConfirm();
              }
              $(`#${dialogId}`).modal('hide').on('hidden.bs.modal', function () {
                  $(this).remove(); // 移除对话框
              });
          });

          // 在对话框隐藏时移除对话框元素
          $(`#${dialogId}`).on('hidden.bs.modal', function () {
              $(this).remove();
          });
      }


      $(document).ready(function() {

        const path = window.location.pathname;
        $('.nav-item').removeClass('active');
        console.log(path,"path")
        if (path === '/') {
            $('#nav-home').addClass('active');
        } else if (path === '/add') {
            $('#nav-add').addClass('active');
        } else if (path === '/server_info') {
            $('#nav-server-info').addClass('active');
        }

        $("#personInfo").click(function(){
          const formData = `
              <form action="/change_person_info" method="post" enctype="multipart/form-data" class="form" id="personInfoForm">
                {% csrf_token %}
                <div class="form-group row">
                  <label for="1" class="col-sm-2 col-form-label">用户名</label>
                  <div class="col-sm-10" >
                    <input type="text" name="username" disabled id="" class="form-control" placeholder="请输入用户名" required  value="{{request.user}}"
                    />
                  </div>
                </div>
                <div class="form-group row">
                  <label for="1" class="col-sm-2 col-form-label">昵称</label>
                  <div class="col-sm-10" >
                    <input type="text" name="first_name" id="" class="form-control" placeholder="请输入昵称" required  value="{{request.user.first_name}}"
                    /> 
                  </div>
                </div>
                
              </form>
          `
          createDialog('个人信息', formData, function() {
            // 确认按钮的回调逻辑
            $("#personInfoForm").submit()
            console.log('Record deleted');
          });

        })

        $("#changePassword").click(function(){
          const formData = `
              <form action="/change_password" method="post" enctype="multipart/form-data" class="form" id="changePasswordForm">
                {% csrf_token %}
                <div class="form-group row">
                  <label for="1" class="col-sm-2 col-form-label">原密码</label>
                  <div class="col-sm-10" >
                    <input type="password" name="old_password" id="" class="form-control" placeholder="请输入原密码" required
                    />
                  </div>
                </div>
                <div class="form-group row">
                  <label for="1" class="col-sm-2 col-form-label">新密码</label>
                  <div class="col-sm-10" >
                    <input type="password" name="new_password" id="" class="form-control" placeholder="请输入新密码" required
                    />
                  </div>
                </div>
                <div class="form-group row">
                  <label for="1" class="col-sm-2 col-form-label">确认新密码</label>
                  <div class="col-sm-10" >
                    <input type="password" name="new_password_confirm" id="" class="form-control" placeholder="请输入确认新密码" required
                    />
                  </div>
                </div>
              </form>
          `
          createDialog('密码修改', formData, function() {
            // 确认按钮的回调逻辑
            $("#changePasswordForm").submit()
            console.log('Record deleted');
          });

        })
        // 获取消息并显示
        var messages = [
            {% for message in messages %}
                {
                    "tag": "{{ message.tags }}",
                    "text": "{{ message }}"
                },
            {% endfor %}
        ];

        messages.forEach(function(message) {
          showMessage(message.tag, message.text)
        });

        function showMessage(type, text) {
          var alertClass = getAlertClass(type);
          var alertMessage = $('<div class="alert ' + alertClass + ' alert-dismissible fade show mt-3" role="alert" style="width:auto">' +
              '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
              '<span aria-hidden="true">&times;</span>' +
              '</button>' +
              text +
              '</div>');

          $('#message-container').prepend(alertMessage);

          // 自动关闭警告框
          setTimeout(function() {
              alertMessage.alert('close');
          }, 5000);  // 2 秒后自动关闭
      }

        function getAlertClass(tag) {
            switch (tag) {
                case 'success':
                    return 'alert-success';
                case 'info':
                    return 'alert-info';
                case 'warning':
                    return 'alert-warning';
                case 'error':
                    return 'alert-danger';
                default:
                    return 'alert-info';
            }
        }
        });
    </script>
  </body>
</html>
